@import "iconfont";
@function r($px) {
    @return $px/40*1rem;
}

* {
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
}

.web{
    width: 100%;
    height: 100%;
    position: relative;

.caidan_box {
        overflow: hidden;
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: #222222;
        z-index: 16;
    & input[type="checkbox"]:checked~.sosu {
        left: 0;
    }
    input{
        display: none;
    }
    .sosu {
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #222222;
        z-index: 16;
        transition: all 1s;
        input {
            display: none;
        }
        .one {
            overflow: hidden;
            margin: 0 auto;
            padding-top: r(25);
            width: 95%;
            height: r(90);
            .one1 {
                overflow: hidden;
                position: relative;
                float: left;
                margin-top: r(5);
                width: r(50);
                height: r(50);
                background: red;
                border-radius: 50%;
                img {
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    margin: auto;
                }
            }
            .one2 {
                overflow: hidden;
                width: r(530);
                height: r(55);
                float: right;
                position: relative;
                border-radius: 15px;
                border: solid 0.5px white;
                input {
                    padding-left: r(200);
                    float: right;
                    overflow: hidden;
                    color: white;
                    background: none;
                    display: block;
                    width: r(530);
                    height: r(54);
                    border-radius: 15px;
                    border: solid 0.5px;
                    border-left: none;
                }
            }
            .one3 {
                position: relative;
                top: r(3);
                left: r(20);
                width: r(60);
                height: r(55);
                img {
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    margin: auto;
                }
            }
            .one4 {
                width: r(90);
                height: r(35);
                position: absolute;
                top: r(10);
                left: r(85);
                color: #7e7e7e;
                border-right: solid 1px #7e7e7e;
            }
        }
        .two {
            overflow: hidden;
            position: absolute;
            top: r(110);
            left: 40%;
            width: r(135);
            height: r(130);
            border-radius: 50%;
            img {
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                margin: auto;
            }
        }
        
         .five{
             
             position: absolute;
             top: r(360);
             left: 0;
             width: 100%;
             height: r(30);
             background: #303030;
             border: solid 3px #313131;
         }
         .f1{
             margin: 0 auto;
             position: absolute;
             top: r(260);
             left: 42%;
             width: r(150);
             height: r(22);
             font-size: r(30);
             color: white;
         }
         .f2{
             margin: 0 auto;
             position: absolute;
             top: r(305);
             left: 43%;
             width: r(110);
             height: r(22);
             font-size: r(25);
             color: #555354;
         }
        .thve {
            width: 94%;
            position: absolute;
            top: r(420);
            left: 3%;
            .xialak{
                overflow: hidden;
                & input[type="checkbox"]:checked~.thveone {
        height: r(180);
    }
            .thveone {
                overflow: hidden;
                width: 100%;
                height: r(66);
                ul {
                    list-style: none;
                    width: 100%;
                    input[type="checkbox"] {
                        display: block;
                        width: 1000%;
                        height: 0;
                    }
                    label {
                        border-bottom: solid 1px #313131;
                    }
                    .thve1 {
                        width: r(600);
                        height: r(50);
                        .thve2 {
                            font-size: r(25);
                            color: #656565;
                            float: left;
                        }
                        .thve3 {
                            position: absolute;
                            top: 0;
                            right: 0;
                        }
                    }
                    .thve4 {
                        font-size: r(23);
                        margin: 0;
                        padding: 0;
                        width: 100%;
                        list-style: none;
                        ul {
                            margin-top: r(-40);
                            margin-bottom: 0;
                            li {
                                font-size: r(23);
                                margin: 0 auto;
                                margin-top: r(40);
                                text-align: center;
                                width: r(500);
                                height: r(53);
                                color: white;
                                border-bottom: solid 1px #313131;
                            }
                            li:last-child{
                                font-size: r(23);
                                line-height: r(50);
                                margin: 0 auto;
                                text-align: center;
                            }
                        }
                    }
                }
            }
            }
            .xialak1{
                margin-top: r(10);
                overflow: hidden;
                & input[type="checkbox"]:checked~.thveone1 {
        height: r(180);
    }
            .thveone1 {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: r(66);
                ul {
                    list-style: none;
                    width: 100%;
                    input[type="checkbox"] {
                        display: block;
                        width: 1000%;
                        height: 0;
                    }
                    label {
                        border-bottom: solid 1px #313131;
                    }
                    .thve1 {
                        width: r(600);
                        height: r(50);
                        .thve2 {
                            font-size: r(25);
                            color: #656565;
                            float: left;
                        }
                        .thve3 {
                            position: absolute;
                            top: 0;
                            right: 0;
                        }
                    }
                    .thve4 {
                        margin: 0;
                        padding: 0;
                        width: 100%;
                        list-style: none;
                        ul {
                            margin-top: r(-40);
                            li {
                                font-size: r(23);
                                margin: 0 auto;
                                margin-top: r(40);
                                text-align: center;
                                width: r(500);
                                height: r(53);
                                color: white;
                                border-bottom: solid 1px #313131;
                            }
                            li:last-child{
                                line-height: r(50);
                                margin: 0 auto;
                                text-align: center;
                            }
                        }
                    }
                }
            }
            }
            .eigt{
                margin: 0 auto;
                border-radius: 15px;
                color: white;
                text-align: center;
                line-height: r(51);
                margin-top: r(20);
                width: r(178);
                height: r(51);
                background: #b60005;
        }
        }
        
    }
}
}